/*
 * Copyright 2019 Crown Copyright
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.annotationContainer {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #C5CDE2;
    padding: 10px;
}

.annotationTop {
    display: flex;
    flex-flow: column;
}

.annotationBottom {
    display: flex;
    flex-grow: 1;
    flex-flow: row;
    min-height: 0;
}

.annotationLeft {
    display: flex;
    flex-flow: column;
    flex-shrink: 0;
    width: 400px;
    overflow: auto;
    padding-right: 10px;
    min-width: 0;
}

.annotationRight {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    overflow: auto;
    min-width: 0;
}




.annotationTitleContainer {
    padding-bottom: 2px;
}

.annotationTitleTextBox {
    font-size: 18pt;
    width: 100%;
}

.annotationTextBox {
    opacity: 0.8;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

.annotationTextBox:focus {
    border-color: #C5CDE2;
    opacity: 1 !important;
 }

.annotationTextBox:hover {
    opacity: 1;
 }






.annotationSubjectContainer {
    padding-bottom: 10px;
}

.annotationSubjectTextBox {
    font-size: 14pt;
    width: 100%;
}





.annotationSetting {
    width: 100%;
    padding: 5px 0;
}

.annotationSettingHeading {
    display: flex;
    width: 100%;
    cursor: pointer;
}

.annotationClickLabel {
    flex-grow: 0;
    font-weight: 500;
    width: 90px;
    padding-right: 5px;
    opacity: 0.9;
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
}

.annotationClickLabel:hover {
    opacity: 1;
    text-decoration: underline;
}

.annotationLabel {
    flex-grow: 1;
}

.annotationCommentContainer {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    width: 100%;
    height: 200px;
}

.annotationHistory {
    width: 100%;
    height: 100%;
}

.annotationComment {
    flex-grow: 1;
    border: 1px solid #C5CDE2;
    border-radius: 5px;
    padding: 5px;
}

.annotationButtons {
    flex-shrink: 0;
    text-align: right;
    padding-top: 10px;
}

.annotationDropDownIcon {
    margin-top: -2px;
}

.annotationAssignYourself {
    display: inline-block;
    color: #0366d6;
    cursor: pointer;
    text-decoration: underline;
    padding-left: 10px;
    padding-right: 5px;
}

.annotationDurationLabel {
}

.annotationDurationLabel:hover {
    color: #0366d6;
}

.annotationHistoryContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.annotationHistoryOuter {
    flex-grow: 1;
    overflow: auto;
    padding-left: 10px;
    padding-bottom: 20px;
}

.annotationHistoryInner {
    width: 100%;
    height: 100%;
}

.annotationHistoryLine {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-bottom: 10px;
    border-left: 1px solid #C5CDE2;
}

.annotationHistoryLineMargin {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 15px;
}

.annotationHistoryLineMarker {
    border-top: 1px solid #C5CDE2;
    width: 100%;
    height: 1px;
}

.annotationHistoryCommentBorder {
    flex-grow: 1;
    border: 1px solid #C5CDE2;
    border-radius: 5px;
}

.annotationHistoryCommentHeader {
    width: 100%;
    padding :5px;
    white-space: pre-wrap;
    word-break: break-word;
    border-bottom: 1px solid #C5CDE2;
    background-color: #eee;
}

.annotationHistoryCommentBody {
    width: 100%;
    padding: 5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.annotationHistoryItem {
    flex-grow: 1;
    padding: 5px;
    white-space: pre-wrap;
}

.annotationHistoryItem u {
    cursor: pointer;
}

.annotationHistoryText {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: -1;
}

.annotationHistoryCopyButton {
    flex-grow: 0;
    width: 200px;
    margin-top: 10px;
    align-self: flex-end;
}

.showLinkedEvents {
    display: inline-block;
    color: #0366d6;
    cursor: pointer;
    text-decoration: underline;
    text-align: right;
    padding-bottom: 10px;
}
